<%@ page pageEncoding="UTF-8" contentType="text/html; UTF-8" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html>
<head>
	<title>商品维护</title>
	<meta charset="UTF-8"/>
    <link rel="stylesheet" href="../css/bootstrap-4.6.0-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/font-awesome-4.7.0/font-awesome-4.7.0/css/font-awesome.min.css">
	<style>
    .table td{
        vertical-align: middle;
        text-align: center;
    }
	</style>
</head>
<body>
<%@include file="../resources/nav.jsp"%>
<div class="container-fluid" style="margin-top: 100px;">
	<!-- 看板 -->
	<div class="row">
		<div class="col-md-1"></div>
		<div class="col-md-10">
			<div class="row">
				<div class="col-md-12">
					<div class="card">
						<div class="card-header bg-light text-center">
							电商平台销售趋势
						</div>
						<div class="card-body">
							<div class="ibox float-e-margins">
								<div class="ibox-title">
									<h5><span style="font-size: 16px;" class="label label-success">电商平台销售趋势</span></h5>
								</div>
								<div class="ibox-content">
									<div id='lineChart' style="height:300px;"></div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-md-1"></div>
	</div>
	<!-- 按钮组 -->
	<div class="row" style="margin-top: 20px;">
		<div class="col-md-1"></div>
		<div class="col-md-10">
<%--			<input type="submit"  class="btn btn-sm btn-outline-danger" value="删除" onclick="deleteMany()">--%>
			<a class="btn btn-sm btn-outline-danger" onclick="deleteMany()" href="javascript:void(0)"><i class="fa fa-trash-o"></i>删除</a>
			<a href="${pageContext.request.contextPath}/product/Add.jsp" class="btn btn-outline-success btn-sm"><i class="fa fa-arrow-up"></i> 添加</a>
			<a href="${pageContext.request.contextPath}/product/Export.jsp" class="btn btn-outline-success btn-sm"><i class="fa fa-file-excel-o"></i> 导出</a>
		</div>
		<div class="col-md-1"></div>
	</div>
	<!-- 看板 -->
	<div class="row">
		<div class="col-md-1"></div>
		<div class="col-md-10">
			<table class="table table-sm table-bordered table-hover">
				<thead>
				<tr class="bg-light text-center">
					<th><input type="checkbox" name="id" id="id" onclick="swapCheck()" ></th>
					<th><span class="align-self-md-auto">商品名</span></th>
					<th>价格</th>
					<th>库存</th>
					<th>状态</th>
					<th>入库时间</th>
					<th>操作</th>
				</tr>

				</thead>
				<tbody>
				<c:forEach var="p" items="${requestScope.page.list}">

					<tr >
						<td class="text-center">
							<input type="checkbox" name="id" value="${p.id}">
						</td>
						<td>${p.name}</td>
						<td>${p.price}</td>
						<td>${p.sum}</td>
						<td>
							<c:choose>
								<c:when test="${p.status == 0}">
									<span class="badge badge-warning ">下架</span>
								</c:when>
								<c:otherwise>
									<span class="badge badge-success">上架</span>
								</c:otherwise>
							</c:choose>
						</td>
						<td>
							<fmt:formatDate value="${p.addDate}" pattern="yyyy-MM-dd"/>
						</td>
						<td>

							<c:choose>
								<c:when test="${p.status == 0}">
									<a class="btn btn-sm btn-outline-success" href="/Mall/product/status?id=${p.id}"><i class="fa fa-arrow-up"></i>上架</a>
								</c:when>
								<c:otherwise>
									<a class="btn btn-sm btn-outline-warning" href="/Mall/product/status?id=${p.id}"><i class="fa fa-arrow-down"></i>下架</a>
								</c:otherwise>
							</c:choose>
							<a class="btn btn-sm btn-outline-danger" href="/Mall/product/delete?id=${p.id}"><i class="fa fa-trash-o"></i>删除</a>
							<a class="btn btn-sm btn-outline-info" href="/Mall/product/mes?id=${p.id}"><i class="fa fa-edit"></i>编辑</a>
							<a class="btn btn-sm btn-outline-info" href="/Mall/product/info?id=${p.id}"><i class="fa fa-info"></i>查看</a>

						</td>
					</tr>
				</c:forEach>
				</tbody>
			</table>
		</div>
		<div class="col-md-1"></div>
	</div>
	<div class="row">
		<div class="col-md-3"></div>
		<div class="col-md-6" style="text-align: center">

			<c:if test="${requestScope.page.pageNum <=1}">
				<a href="#">上一页</a>
			</c:if>
			<c:if test="${requestScope.page.pageNum > 1}">
				<a href="/Mall/product/page?pageNum=${requestScope.page.pageNum-1}&pageSize=${requestScope.page.pageSize}">上一页</a>
			</c:if>
<%--			<span>--%>
<%--				&nbsp;&nbsp;第 ${requestScope.page.pageNum} 页&nbsp;&nbsp;--%>
<%--			</span>--%>
			<c:choose>
				<c:when test="${requestScope.page.pageTotal<=5}">
					<%--循环输出这些页码--%>
					<c:forEach begin="1" end="${requestScope.page.pageTotal}" var="i">
						<%--如果是当前页面，则显示【当前页码】--%>
						<c:if test="${i == requestScope.page.pageNum}">
							【${i}】
						</c:if>
						<%--如果不是当前页码则直接显示数字，并加上超链接实现可以跳转的功能--%>
						<c:if test="${i != requestScope.page.pageNum}">
							<a href="/Mall/product/page?pageNum=${i}&pageSize=${requestScope.page.pageSize}">${i}</a>
						</c:if>
					</c:forEach>

				</c:when>
				<c:when test="${requestScope.page.pageTotal>5}">
					<c:choose>
						<%--页码在前三，显示1-5--%>
						<c:when test="${requestScope.page.pageNum<=3}">
							<c:forEach begin="1" end="5" var="i">
								<%--如果是当前页面，则显示【当前页码】--%>
								<c:if test="${i == requestScope.page.pageNum}">
									【${i}】
								</c:if>
								<%--如果不是当前页码则直接显示数字，并加上超链接实现可以跳转的功能--%>
								<c:if test="${i != requestScope.page.pageNum}">
									<a href="/Mall/product/page?pageNum=${i}&pageSize=${requestScope.page.pageSize}">${i}</a>
								</c:if>
							</c:forEach>
						</c:when>

						<%--页码在后三，显示(Total-4)-Total--%>
						<c:when test="${requestScope.page.pageNum > requestScope.page.pageTotal-3}">
							<c:forEach begin="${requestScope.page.pageTotal-4}" end="${requestScope.page.pageTotal}" var="i">
								<%--如果是当前页面，则显示【当前页码】--%>
								<c:if test="${i == requestScope.page.pageNum}">
									【${i}】
								</c:if>
								<%--如果不是当前页码则直接显示数字，并加上超链接实现可以跳转的功能--%>
								<c:if test="${i != requestScope.page.pageNum}">
									<a href="/Mall/product/page?pageNum=${i}&pageSize=${requestScope.page.pageSize}">${i}</a>
								</c:if>
							</c:forEach>

						</c:when>

						<%--其余其他情况，显示（当前页码-2）-（当前页码+2）--%>
						<c:otherwise>
							<c:forEach begin="${requestScope.page.pageNum-2}" end="${requestScope.page.pageNum+2}" var="i">
								<%--如果是当前页面，则显示【当前页码】--%>
								<c:if test="${i == requestScope.page.pageNum}">
									【${i}】
								</c:if>
								<%--如果不是当前页码则直接显示数字，并加上超链接实现可以跳转的功能--%>
								<c:if test="${i != requestScope.page.pageNum}">
									<a href="/Mall/product/page?pageNum=${i}&pageSize=${requestScope.page.pageSize}">${i}</a>
								</c:if>
							</c:forEach>
						</c:otherwise>
					</c:choose>

				</c:when>
			</c:choose>

			<c:if test="${requestScope.page.isLastPage}">
				<a href="#">下一页</a>
			</c:if>
			<c:if test="${!requestScope.page.isLastPage}">
				<a href="/Mall/product/page?pageNum=${requestScope.page.pageNum+1}&pageSize=${requestScope.page.pageSize}">下一页</a>
			</c:if>

		</div>
		<div class="col-md-3"></div>
	</div>
</div>
<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/npm.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/bootstrap.bundle.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
<!-- 引入百度Echarts -->
<script src="../js/echarts.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	/* 折线图 */
	// 基于准备好的dom，初始化echarts实例
	var myChart = echarts.init(document.getElementById('lineChart'));
	//准备数据
	var saleNum="${saleNum}";
	saleNum =saleNum.substr(1,saleNum.length-2).split(',')
	var visitNum="${visitNum}";
	visitNum =visitNum.substr(1,visitNum.length-2).split(',');
	// 指定图表的配置项和数据
	option = {
		title: {
			text: ''
		},
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				type: 'cross',
				label: {
					backgroundColor: '#6a7985'
				}
			}
		},
		legend: {
			data: ['销售量', '访问量']
		},
		toolbox: {

		},
		grid: {
			left: '3%',
			right: '4%',
			bottom: '3%',
			containLabel: true
		},
		xAxis: [{
			type: 'category',
			boundaryGap: false,
			data: ['1月', '2月', '3月', '4月', '5月', '6月','7月','8月','9月','10月','11月','12月']
		}],
		yAxis: [{
			type: 'value',
			axisLabel: {
				formatter: '{value} 次'
			}
		}],
		series: [

			{
				name: '销售量',
				type: 'line',
				stack: '总量',
				areaStyle: {
					normal: {}
				},
				data: saleNum
			},
			{
				name: '访问量',
				type: 'line',
				stack: '总量',
				areaStyle: {
					normal: {}
				},
				data: visitNum
			}
		]
	};

	// 使用刚指定的配置项和数据显示图表。
	myChart.setOption(option);

	var isCheckAll = true;
	function swapCheck() {
		if (isCheckAll) {
			$("input[type='checkbox']").each(function() {
				this.checked = true;
			});
			isCheckAll = false;
		} else {
			$("input[type='checkbox']").each(function() {
				this.checked = false;
			});
			isCheckAll = true;
		}
	};


	function deleteMany(){
		let id=null;
		$("input[type='checkbox']").each(function() {
			if(this.checked === true){
				id=this.value;
				console.log(id);
				$.ajax({
					url:"/Mall/product/delete?id="+id,
					type:"POST",
					success:function (){
						<%--location.replace("/Mall/product/page?pageNum=1&pageSize=${requestScope.page.pageSize}");--%>
						location.reload();
					}
				})
			}
		});

	};
</script>
</body>
</html>
